<template>
	<template v-if="showNotChild">
		<div class="news">
			<!-- 面包屑 -->
			<el-breadcrumb :separator-icon="ArrowRight">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/news' }">新闻</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- 内容 -->
			<div>
				<div class="title">
					新闻
				</div>
				<div class="list">
					<template v-for="item in newsList" :key="item.id">
						<div class="item" @click="toNewsId(item.id)">
							<div class="content">
								<div>
									{{ item.title }}
								</div>
								<div>
									{{ item.content }}
								</div>
								<div>
									{{ item.date }}
								</div>
							</div>
							<div class="img">
								<img :src="item.img" />
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</template>
	<template v-else>
		<router-view></router-view>
	</template>
</template>
<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import useJump from '@/utils/jump';
import { useRoute } from 'vue-router';

const route = useRoute();

const { jumpTo } = useJump();
// 新闻列表
const newsList = ref([
	{
		id: '1',
		title: '欧神如何添加收款账号？',
		content: '当地时间2024年12月17日，美国共和党总统候选人特朗普在各州的选举人团会议中获得了足够的选举人票，正式确定赢得总统职位。 根据美国总统选举制度，候选人需要获得538张选举人票中的至少270张才能当选总统。最终统计显示，特朗普赢得了312张选举人票。',
		date: '2024-12-20 17:22:56',
		img: 'https://pic.rmb.bdstatic.com/bjh/events/3cdc966434b31da3d1f24f1a3ac114a37147.jpeg@h_1280'
	},
	{
		id: '2',
		title: '什么是USDT和比特币？',
		content: '当地时间2024年12月17日，美国共和党总统候选人特朗普在各州的选举人团会议中获得了足够的选举人票，正式确定赢得总统职位。 根据美国总统选举制度，候选人需要获得538张选举人票中的至少270张才能当选总统。最终统计显示，特朗普赢得了312张选举人票。',
		date: '2024-12-20 17:22:56',
		img: 'https://pic.rmb.bdstatic.com/bjh/events/3cdc966434b31da3d1f24f1a3ac114a37147.jpeg@h_1280'
	},
	{
		id: '3',
		title: '2024年比特币挖矿企业的最新趋势和发展',
		content: '当地时间2024年12月17日，美国共和党总统候选人特朗普在各州的选举人团会议中获得了足够的选举人票，正式确定赢得总统职位。 根据美国总统选举制度，候选人需要获得538张选举人票中的至少270张才能当选总统。最终统计显示，特朗普赢得了312张选举人票。',
		date: '2024-12-20 17:22:56',
		img: 'https://pic.rmb.bdstatic.com/bjh/events/3cdc966434b31da3d1f24f1a3ac114a37147.jpeg@h_1280'
	}
])

const toNewsId = (id: any) => {
	console.log(`/news/${id}`)
	jumpTo(
		`/news/${id}`
	)
}

// 是否展示子路由
const showNotChild = computed(() => {
	return route.path === '/news'
})

</script>
<style lang="scss" scoped>
/* 修改链接样式的样式 */
::v-deep .el-breadcrumb__item .is-link {
	/* 修改链接字体加粗 */
	font-size: 14px;

	/* 修改链接颜色 */
	font-weight: 400;
	color: #86909C;

	&:hover {
		color: #090b0d;

		/* 修改链接悬停颜色 */
	}
}

::v-deep .el-breadcrumb__item:nth-child(2) .is-link {
	color: #090b0d;
	cursor: pointer;
}

.news {
	margin: 4vh 0;

	.title {
		margin-top: 20px;
		margin-bottom: 20px;
		font-family: "Microsoft YaHei", "Microsoft YaHei";
		font-size: 36px;
		font-weight: bold;
		color: #000;
	}

	.list {
		.item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;
			cursor: pointer;

			&:hover {
				text-decoration: underline;

				/* 鼠标悬浮时显示下划线 */
			}

			.content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 75%;

				>div:nth-child(1) {
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 18px;
					font-weight: bold;
					color: #000;
				}

				>div:nth-child(2) {
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #000;
				}

				>div:nth-child(3) {
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #86909C;
				}
			}

			.img {
				>img {
					width: 300px;
					height: 146px;
				}
			}
		}
	}
}</style>
